<template>
  <div class="academic_wrap">
    <loader :loading="loading">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>教务系统</el-breadcrumb-item>
        <el-breadcrumb-item>学业情况</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="collapse">
        <el-collapse v-if="JSON.stringify(academic) != '{}'">
          <el-collapse-item name="jc" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('jc')}">
                <i class="el-icon-menu" />
                学科基础课程
                <span class="status">
                  {{academic.jc.finishCredit}}&nbsp;/&nbsp;{{academic.jc.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.jc" />
          </el-collapse-item>
          <el-collapse-item name="zybx" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('zybx')}">
                <i class="el-icon-menu"/>
                专业必修课程
                <span class="status">
                  {{academic.zybx.finishCredit}}&nbsp;/&nbsp;{{academic.zybx.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.zybx" />
          </el-collapse-item>
          <el-collapse-item name="jzx" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('jzx')}">
                <i class="el-icon-menu"/>
                集中性实践教学环节
                <span class="status">
                  {{academic.jzx.finishCredit}}&nbsp;/&nbsp;{{academic.jzx.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.jzx" />
          </el-collapse-item>
          <el-collapse-item name="tsbx" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('tsbx')}">
                <i class="el-icon-menu"/>
                通识类必修课程
                <span class="status">
                  {{academic.tsbx.finishCredit}}&nbsp;/&nbsp;{{academic.tsbx.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.tsbx" />
          </el-collapse-item>
          <el-collapse-item name="jsjy" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('jsjy')}">
                <i class="el-icon-menu"/>
                教师教育类必修课程
                <span class="status">
                  {{academic.jsjy.finishCredit}}&nbsp;/&nbsp;{{academic.jsjy.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.jsjy" />
          </el-collapse-item>
          <el-collapse-item name="fxmk" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('fxmk')}">
                <i class="el-icon-menu"/>
                方向模块
                <span class="status">
                  {{academic.fxmk.finishCredit}}&nbsp;/&nbsp;{{academic.fxmk.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.fxmk" />
          </el-collapse-item>
          <el-collapse-item name="zyxx" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('zyxx')}">
                <i class="el-icon-menu"/>
                专业选修课程
                <span class="status">
                  {{academic.zyxx.finishCredit}}&nbsp;/&nbsp;{{academic.zyxx.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.zyxx" />
          </el-collapse-item>
          <el-collapse-item name="cxcy" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('cxcy')}">
                <i class="el-icon-menu"/>
                创新与创业
                <span class="status">
                  {{academic.cxcy.finishCredit}}&nbsp;/&nbsp;{{academic.cxcy.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.cxcy" />
          </el-collapse-item>
          <el-collapse-item name="lswh" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('lswh')}">
                <i class="el-icon-menu"/>
                历史与文化
                <span class="status">
                  {{academic.lswh.finishCredit}}&nbsp;/&nbsp;{{academic.lswh.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.lswh" />
          </el-collapse-item>
          <el-collapse-item name="dxty" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('dxty')}">
                <i class="el-icon-menu"/>
                大学体育5,6
                <span class="status">
                  {{academic.dxty.finishCredit}}&nbsp;/&nbsp;{{academic.dxty.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.dxty" />
          </el-collapse-item>
          <el-collapse-item name="yssm" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('yssm')}">
                <i class="el-icon-menu"/>
                艺术与审美
                <span class="status">
                  {{academic.yssm.finishCredit}}&nbsp;/&nbsp;{{academic.yssm.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.yssm" />
          </el-collapse-item>
          <el-collapse-item name="jpsz" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('jpsz')}">
                <i class="el-icon-menu"/>
                精品思政课程
                <span class="status">
                  {{academic.jpsz.finishCredit}}&nbsp;/&nbsp;{{academic.jpsz.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.jpsz" />
          </el-collapse-item>
          <el-collapse-item name="qt" class="collapse-item">
            <template slot="title">
              <span class="collapse-title" :style="{'color':itemStatus('qt')}">
                <i class="el-icon-menu"/>
                其他课程
                <span class="status">
                  {{academic.qt.finishCredit}}&nbsp;/&nbsp;{{academic.qt.limitCredit}}
                </span>
              </span>
            </template>
            <academic-item :course="academic.qt" />
          </el-collapse-item>
        </el-collapse>
        <div v-else>
          <el-empty description="没有内容哦~" />
        </div>
      </div>
    </loader>
  </div>
</template>

<script>
  import Loader from '@/components/Loader'
  import AcademicItem from '@/components/home/education/academic/AcademicItem'
  // 网络请求模块
  import { loginEducation, getAcademic } from '@/network/index'

  import reLogin from '@/assets/js/ReLogin'
  export default {
    name: 'Academic',
    data() {
      return {
        loading: false,
        // 存放所有学业数据
        academic: {}
      }
    },
    components: {
      Loader,
      AcademicItem
    },
    computed: {
      CASTGC() {
        return this.$store.state.CASTGC
      }
    },
    methods: {
      async getData() {
        this.loading = true
        // 先判断是否已经获得了教务系统token
        let { jsessionId, sfCookie18 } = this.$store.state.Edu
        // 查询学业
        let res = await getAcademic(jsessionId, sfCookie18)
        if(res.data.status === 'ERROR') {
          let res1 = await loginEducation(this.CASTGC)
          if(res1.data.status === 'ERROR') {
            // 本地存储的token已失效，自动重新登录
            try{
              let CASTGC = await reLogin()
              this.$store.commit('handleLogin', CASTGC)
              res1 = await loginEducation(this.CASTGC)
            }catch(err) {
              this.$notify.error({
                title: '失败',
                message: '通行证失效，请尝试重新登录'
              })
              this.loading = false
              return
            }
          }
          jsessionId = res1.data.jsessionId
          sfCookie18 = res1.data.sfCookie18
          this.$store.commit('updateEdu', {jsessionId, sfCookie18})
          // 重新调用自己
          this.getData()
        }else if(res.data.status === 'SUCCESS') {
          this.academic = res.data
          // 将数据缓存起来，防止重复请求
          this.$store.commit('saveAcademic', this.academic)
          this.loading = false
        }
      },
      itemStatus(item) {
        // 判断当前项目完成状态
        let finishCredit = this.academic[item].finishCredit
        let limitCredit = this.academic[item].limitCredit
        if(finishCredit >= limitCredit) {
          return '#67c23a'
        }
      }
    },
    // 组件显示
    activated() {
      let academic = this.$store.state.academic
      let str = JSON.stringify(academic)
      if(str === '{}') {
        // 第一次读取数据
        this.getData()
      }else {
        this.academic = academic
      }
    }
  }
</script>

<style scoped>
  .academic_wrap {
    height: 100%;
  }

  .collapse {
    margin-top: 40px;
    height: 100%;
  }

  .collapse-item {
    height: 100%;
  }

  .collapse-title {
    font-size: 20px;
    width: 100%;
  }
  .collapse-title:hover {
    background-color: #eee;
  }
  .collapse-title i {
    margin-right: 5px;
  }
  .status {
    margin-left: 20px;
  }
</style>